摘要

• 這篇文章的目的是 ?
• React「Routes」分享
• 連結

這篇文章的目的是 ?

為什麼要分享 Routers？在現代的網頁開發中，路由（Routers）是一個極為重要的元件，它們負責管理網頁應用程式的不同頁面之間的導航和狀態管理。正確使用路由可以讓我們的應用程序變得更加組織化和易於維護，同時也提供了更好的用戶體驗。因此，學習如何使用 React 中的路由庫是非常重要的，這也是我們要分享這個主題的原因。

React「Routes」分享

React Router V5：
React Router V5 是 React 中最廣泛使用的路由庫之一。它提供了一組組件，如BrowserRouter、Route和Link，用於處理網頁的路由。以下是一個簡單的示例：

import { BrowserRouter, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">首頁</Link>
          </li>
          <li>
            <Link to="/about">關於我們</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </BrowserRouter>
  );
}

React Router V6：
React Router V6 是 React Router 的下一個版本，它引入了一些重要的改變。最大的不同之一是，它將路由規則集中到了一個Route組件中，使代碼更加簡潔和易於理解。以下是一個簡單的示例：

import { Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首頁</Link>
          </li>
          <li>
            <Link to="/about">關於我們</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Router>
  );
}

差異解釋：
React Router V6 簡化了路由配置，使用element屬性替代了component，讓組件更容易管理。此外，V6 引入了Routes組件，可以更清晰地定義嵌套路由。這些變化提高了代碼的可讀性和維護性，使開發更加高效。藉由學習這兩個版本的差異，您可以更好地理解 React 中的路由庫，並根據項目需求選擇適合的版本。路由是建立強大網頁應用程式的重要基礎，我們將在本章節深入探討如何使用這些工具來建立優秀的 React 應用程式。

連結

• React：https://react.dev/